<template>


    <div class="aaa">
        <div v-if="list.length == 0" class="tishi">
            --- 该用户还未发布任何文章 ---
        </div>
        111
        <!--                  内容-->
        <div class="jinrirediang1" v-for="(p,index) in wenzhang" :key="index">
            <!--            帖子标题-->

            <!--                一条帖子的框框，从这里开始v-for遍历-->
            <div class="rediang1" >
                <router-link :to="{name:'wenzhangxiangqing',
                                 query:{id:p.id,
                                        title:p.title,
                                        content:p.content,
                                        time:p.time
                                 }}">


                    <div class="zuixintiezi2" >
                        {{p.title}}
                    </div>
                    <div class="contentcss">
                        <div v-html="p.content.length > 100 ? p.content.slice(0, 100) + '...' :p.content" />
                    </div>
                    <div class="xianshicount">
                        👍{{p.countGetLike}}  ☆{{p.countCollect}}   👀{{p.countLook}}
                    </div>
                </router-link>
            </div>
        </div>


    </div>
</template>

<script>
    export default {
        name: "wenzhang",
        data() {
            return {
                wenzhang:[],
            };
        },
        props: {
            list: {
                type: Array,
                props: () => [],
            },
        },
        mounted() {
            this.wenzhang = this.list;
        },
        watch: {
            "list": {
                handler(newValue) {
                    if (newValue === "") {
                        this.wenzhang = []
                        this.total = 0
                        return
                    }
                    this.wenzhang = newValue;
                },
                deep: true
            }
        },
    }
</script>

<style scoped>
    .aaa{
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        overflow: scroll;
        min-height: 850px;
        width: 100%;
        /*height: auto!important;*/
        /*background: #409EFF;*/
    }
    .jinrirediang1{
        height: 200px;
        width: 100%;
        /*margin-bottom: 50px;*/
    }
    /*最新帖子标题的样式*/
    .zuixintiezi2{
        height: 20%;
        margin-left: 20px;
        text-align: left;
        color: black;
        /*line-height: 2em;*/
        font-size: 18px;
        color: #111111;
    }
    .rediang1{
        border: #FFFACD solid 2px;
        background: #FFFFE0;
        margin-top: 20px;
        margin-left: 10%;
        width: 80%;
        height: 80%;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #111111;
    }
    .contentcss{
        height: 50%;
        color: #111111;
    }
    .xianshicount{
        height: 15%;
        color: #111111;
        float: right;
    }
    .tishi{
        width: 100%;
        height: 50px;
        color: #888888;
        font-size: 30px;
        text-align: center;
    }
</style>
